<template>
  <transition name="">
    <div class="archives">
      <v-header ref="head" :title="$t('title.archives')" :opacity="opacity" :fixed="true"></v-header>
      <scroll style="overflow: hidden; height: 100%" ref="wrapperScroll" :bounce="false" :probeType="3" :listenScroll="true" @scroll="scrollWrapper" v-cloak>
        <div>
            <div ref="top" class="top" v-lazy:background-image="user.backgroundImageUrl || imageTopBackround">
                <div class="wrapper" :style="{paddingTop: paddingTop + 'px'}">
                    <div style="display: flex; justify-content: space-between">
                        <div style="display: flex;">
                          <div class="head" :style="{backgroundImage:`url(${user.headUrl || imageTop})`}">
                          </div>
                          <div class="num">
                              <div class="item" @click="toFollow">
                                  <p>关注</p>
                                  <p>{{user.followingCount}}</p>
                              </div>
                              <div class="diliver"></div>
                              <div class="item"  @click="toFans">
                                  <p>粉丝</p>
                                  <p>{{user.followerCount}}</p>
                              </div>
                          </div>
                        </div>
                        <div class="photoWallWrapper" @click="handlePhotoWall">
                          <p class="image-text"><i class="fa fa-picture-o" aria-hidden="true"></i> {{photoWallNum}}张</p>
                        </div>
                    </div>
                    <div class="nickWrapper">
                        <div class="nickname" style="margin-top: 9px">
                          <p class="nickNameWrapper">{{user.nickname || '会员' + user.phoneNum}}</p>
                          <div class="imageSexWrapper">
                            <img slot="icon" :src="boyImage" style="width: 16px; height: 16px; margin-left:5px;margin-top: 4px" v-if="user.sex === '1' || user.sex === 1">
                            <img slot="icon" :src="girlImage" style="width: 14px; height: 16px; margin-left:5px;margin-top: 4px" v-if="user.sex === '2' || user.sex === 2 ">
                          </div>
                        </div>
                          <div class="btn" v-show="ifMe === false">
                              <div class="litter-button" @click="sendMessage" v-show="isFriends == true">发私信</div>
                              <div class="litter-button" v-if="followStatus != 1" @click.stop="changeFollowStatus(user.id)"><i class="fa fa-plus" aria-hidden="true" style="margin-right: 2px;"></i>加好友</div>
                              <!-- <div class="litter-button" v-if="followStatus == 1" style="color: #8492A6; border-color: #8492A6;" @click.stop="changeFollowStatus(user.id)">已关注</div> -->
                          </div>
                    </div>
                    <p class="signatureWrapper">{{user.signature || '亲，你还没有个性签名，快去编辑自己的信息吧~'}}</p>
                </div>
            </div>

            <div class="tabWrapper">
              <tab :line-width="2" class="tabItem" v-model="index">
                <tab-item :selected="selected === index" v-for="(item, index) in listTab" :key="index" @on-item-click="selectTabEvery">{{item.name}}{{item.num}}</tab-item>
              </tab>

                  <!-- <swiper :height="swiperHeight" :show-dots="false" v-model="index">
                        <swiper-item> -->
                            <!-- 编写动态的排版 -->
                            <scroll ref="tabScroll" style="overflow: hidden;" :listenScroll="true" :probeType="3" @scroll="scrollTab" :bounce="false"
                            v-if="selected === 0"
                            :style="{height: swiperHeight}"
                            :data="taDynamic"
                            :scrollbar="false"
                            :pullDownRefresh="false"
                            :pullUpLoad="true"
                            @pullingUp="onPullingUp">
                                <div>
                                    <div class="travelWrapper" v-if="taDynamic.length > 0">
                                            <timeline>
                                                <timeline-item v-for="item in taDynamic" :key="item.id" @click.native="handleDynamic(item.id)">
                                                    <cell is-link class="positionWrapper">
                                                        <span slot="title">
                                                            <span class="yearWrapper">{{item.publishTime.substring(0,4)}}-</span><span class="monthWrapper">{{item.publishTime.substring(5,10)}}</span>
                                                        </span>
                                                    </cell>
                                                    <div class="momentsDesc">
                                                        {{item.content}}
                                                    </div>
                                                    <div class="imageContent">
                                                        <div class="imageWrapper" :style="{backgroundImage:`url(${image + '-meitu3'})`}" v-for="(image, index) in item.atlas.split(';')" :key="image.index" @click.stop="clickImg(item.atlas.split(';'), index)" v-if="index < 4">
                                                        </div>
                                                    </div>
                                                    <p class="recent">{{item.address}}</p>
                                                    <div class="allPhoto">
                                                        <p class="recentTime">{{item.publishTempTime}}</p>
                                                        <p class="photoNum">共{{item.atlas.split(';').length}}张</p>
                                                    </div>
                                                </timeline-item>
                                            </timeline>
                                    </div>
                                    <not-data v-if="taDynamic.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getTaDynamic(true)"></not-data>
                                </div>
                            </scroll>
                     <!-- </swiper-item> -->
                        <!-- 游记模块 -->
                      <!-- <swiper-item> -->
                            <scroll ref="tabTravelScroll" style="overflow: hidden;" :listenScroll="true" :probeType="3" @scroll="scrollTravelTab" :bounce="false"
                            v-if="selected === 1"
                            :data="travelList"
                            :scrollbar="false"
                            :style="{height: swiperHeight}"
                            :pullDownRefresh="false"
                            :pullUpLoad="true"
                            @pullingUp="onTravelPullingUp">
                                <div>
                                    <div class="travelTabWrapper" v-for="item in travelList" :key="item.id" @click="handleGoTravelDesc(item.id)">
                                        <div class="travelTabTop">
                                            <div class="travelTabTopLeft">
                                                <p>{{item.title}}</p>
                                            </div>
                                            <div class="travelTabTopRight">
                                                <p>{{item.starSum}}</p>
                                                <img slot="icon" :src="favoriteImage" style="width:18px; height:15px;margin-left:8px;margin-top: 5px">
                                            </div>
                                        </div>
                                        <div class="travelInfo">
                                            <div class="travelInfoLeft">
                                                <div class="travelInfoLeftOne">
                                                    <img :src="item.userHeadUrl || imageTop" alt="" style="width:40px;height:40px;border-radius: 50%;">
                                                </div>
                                                <div class="travelInfoLeftTwo">
                                                    <p v-if="item.articleType == 1">{{item.userName + ' 在 ' + item.addressName}}</p>
                                                    <p v-if="item.articleType == 0">{{item.userName}}</p>
                                                </div>
                                            </div>
                                            <div class="travelInfoRight">
                                                <div class="travelInfoRightOne">
                                                    <p>{{item.browseCount}}浏览</p>
                                                </div>
                                                <div class="travelInfoRightTwo">
                                                    <p>{{item.commentCount}}评论</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="travelImageWrapper">
                                            <div class="travelImage" :style="{backgroundImage:`url(${item.firstImg + '-meitu1'})`}">
                                            </div>
                                            <div class="imageText">
                                              <p>{{item.articleText}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <not-data v-if="travelList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetTravel(true)"></not-data>
                                    <!-- 底部div -->
                                    <div style="height:40px"></div>
                                </div>
                            </scroll>
                  <!-- </swiper-item>
                </swiper> -->
            </div>
        </div>
      </scroll>
      <div>
          <previewer :list="selectAtlas" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
      </div>

      <div v-show="ifMe">
        <div class="dynamicPublish" v-if="selected === 0" @click="handlePublishDynamic" style="border-radius: 50%;">
          <img :src="plusbgImage" alt="">
        </div>
        <div class="travelPublish" v-if="selected === 1" @click="showSelectTypeText" style="border-radius: 50%;">
          <img :src="plusbgImage" alt="">
        </div>
      </div>

    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import notData from '@/components/not-data/not-data'
import Scroll from '@/components/scroll/scroll'
import youjiIcon from '@/assets/img/icon/youji.png'
import gonglueIcon from '@/assets/img/icon/gonglue.png'
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import { isIOS, isIphoneX } from '@/assets/js/brower'
import imageTop from '@/assets/img/default_avatar.png'
import favoriteImage from '@/assets/img/myhome/favorite.png'
import imageTopBackround from '@/assets/img/myhome/my_top.png'
import Previewer from '@/components/previewer/previewer'
import { Tab, TabItem, Timeline, TimelineItem, Cell, Rater, Swiper, SwiperItem, TransferDom, Popup } from 'vux'
import answerImage from '@/assets/img/answer.png'
import plusbgImage from '@/assets/img/plusBg.png'
import boyImage from '@/assets/img/myhome/boy.png'
import girlImage from '@/assets/img/myhome/girl.png'
export default {
  data () {
    return {
      youjiIcon,
      gonglueIcon,
      boyImage: boyImage,
      girlImage: girlImage,
      imageTopBackround: imageTopBackround,
      imageTop: imageTop,
      favoriteImage: favoriteImage,
      answerImage: answerImage,
      showHeaderBackground: false,
      selected: 0,
      followStatus: 0,
      starNum: 5,
      index: 0,
      swiperHeight: '500px',
      scrollHeight: '',
      opacity: 0,
      user: {},
      ifMe: false,
      taDynamic: [],
      selectAtlas: [],
      travelList: [],
      strategyList: [],
      plusbgImage: plusbgImage,
      listTab: [
        {
          name: this.$t('tab.dynamic'),
          num: '0'
        },
        {
          name: '游记',
          num: '0'
        }
        // {
        //   name: this.$t('tab.strategy'),
        //   num: '0'
        // }
      ],
      photoWallNum: 0,
      isFriends: false
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, Scroll, isIOS, isIphoneX, localUser, axios, Tab, TabItem, Timeline, TimelineItem, Cell, Rater, Swiper, SwiperItem, Previewer, notData, TransferDom, Popup
  },
  mounted () {
    // this.$refs.scroll.$el.style.height = (window.innerHeight - this.$refs.scroll.$el.offsetTop) + 'px'
    if (isIphoneX()) {
      this.swiperHeight = window.innerHeight - 44 - 74 + 'px'
    } else {
      this.swiperHeight = window.innerHeight - 44 - 60 + 'px'
    }
    setTimeout(() => {
      if (this.$refs.tabScroll) {
        this.$refs.tabScroll.disable()
      }
      if (this.$refs.wrapperScroll) {
        this.$refs.wrapperScroll.enable()
      }
    }, 200)
  },
  created () {
    this.user = localUser.get() || {}

    // 动态部分的分页数据
    this.pageNum = 1
    this.pageSize = 10
    this.pageTravelNum = 1
    this.pageTravelSize = 10
    this.pageStragetyNum = 1
    this.pageStragetySize = 10
    this.selected = 0
    // 获取照片墙数量
    this.getPhotoWallNum()
    // 判断是否是自己来决定是否显示关注和粉丝
    if (this.user.id === this.$route.params.userId) {
      this.ifMe = true
    } else {
      this.ifMe = false
    }
    // 获取某个人的基础信息
    this.getOtherBaseInfo()
    this.paddingTop = 40
    if (isIphoneX()) {
      this.paddingTop += 40
    } else {
      this.paddingTop += 26
    }
    // 获取某个人发布的动态数据
    this.getTaDynamic(true)
    // 获取游记和攻略
    this.handleGetTravel(true)
    // 获取攻略
    // this.handleGetStrategy(true)
    // 获取关注状态
    if (this.user.id) {
      this.getFollowStatus()
    }
    // 获取动态数量
    this.hangdleGetDynamicNum(this.$route.params.userId)
    // 获取游记数量
    this.hangleGetTravelNum(this.$route.params.userId)
    // 获取攻略数量
    // this.hangleGetStrategyNum(this.$route.params.userId, 1)
    // 判断是否是好友
    this.handleIsFriends()
  },
  activated () {
    // this.selected = 0
     // 获取动态数量
    this.hangdleGetDynamicNum(this.$route.params.userId)
    // 获取游记数量
    this.hangleGetTravelNum(this.$route.params.userId)
    // 获取攻略数量
    // this.hangleGetStrategyNum(this.$route.params.userId, 1)
    // 判断是否是自己来决定是否显示关注和粉丝
    this.user = localUser.get() || {}
    if (this.user.id === this.$route.params.userId) {
      this.ifMe = true
    } else {
      this.ifMe = false
    }
    // 获取某个人的基础信息
    this.getOtherBaseInfo()
    // 获取关注状态
    if (this.user.id) {
      this.getFollowStatus()
    }
    // 获取某个人发布的动态数据
    this.getTaDynamic(true)
    // 获取游记和攻略
    this.handleGetTravel(true)
    // 获取攻略
    // this.handleGetStrategy(true)
    // 获取照片墙数量
    this.getPhotoWallNum()
    // 判断是否是好友
    this.handleIsFriends()
  },
  methods: {
    scrollWrapper (position, directionY) {
      if (isIphoneX()) {
        if (position.y <= -176) {
          this.opacity = 1
        } else {
          this.opacity = Math.abs(position.y / 176)
        }
        if (position.y <= -176) {
          if (this.$refs.wrapperScroll.scroll.enabled) {
            this.$refs.wrapperScroll.scrollTo(0, -176)        // 已经滚过去了，把它还原到这个位置
            this.$refs.wrapperScroll.stopScroll()             // 先停止滚动
            this.$refs.wrapperScroll.disable()                // 再禁用滚动
          }
          if (this.$refs.tabScroll) this.$refs.tabScroll.enable()
          if (this.$refs.tabThreeScroll) this.$refs.tabThreeScroll.enable()
          if (this.$refs.tabTravelScroll) this.$refs.tabTravelScroll.enable()
        } else {
          if (this.$refs.tabScroll && this.$refs.tabScroll.scroll.enabled) {
            this.$refs.tabScroll.stopScroll()
            this.$refs.tabScroll.disable()
          } else if (this.$refs.tabThreeScroll && this.$refs.tabThreeScroll.scroll.enabled) {
            this.$refs.tabThreeScroll.stopScroll()
            this.$refs.tabThreeScroll.disable()
          } else if (this.$refs.tabTravelScroll && this.$refs.tabTravelScroll.scroll.enabled) {
            this.$refs.tabTravelScroll.stopScroll()
            this.$refs.tabTravelScroll.disable()
          }
          this.$refs.wrapperScroll.enable()
        }
      } else {
        if (position.y <= -190) {
          this.opacity = 1
        } else {
          this.opacity = Math.abs(position.y / 190)
        }
        if (position.y <= -190) {
          if (this.$refs.wrapperScroll.scroll.enabled) {
            this.$refs.wrapperScroll.scrollTo(0, -190)        // 已经滚过去了，把它还原到这个位置
            this.$refs.wrapperScroll.stopScroll()             // 先停止滚动
            this.$refs.wrapperScroll.disable()                // 再禁用滚动
          }
          if (this.$refs.tabScroll) this.$refs.tabScroll.enable()
          if (this.$refs.tabThreeScroll) this.$refs.tabThreeScroll.enable()
          if (this.$refs.tabTravelScroll) this.$refs.tabTravelScroll.enable()
        } else {
          if (this.$refs.tabScroll && this.$refs.tabScroll.scroll.enabled) {
            this.$refs.tabScroll.stopScroll()
            this.$refs.tabScroll.disable()
          } else if (this.$refs.tabThreeScroll && this.$refs.tabThreeScroll.scroll.enabled) {
            this.$refs.tabThreeScroll.stopScroll()
            this.$refs.tabThreeScroll.disable()
          } else if (this.$refs.tabTravelScroll && this.$refs.tabTravelScroll.scroll.enabled) {
            this.$refs.tabTravelScroll.stopScroll()
            this.$refs.tabTravelScroll.disable()
          }
          this.$refs.wrapperScroll.enable()
        }
      }
    },
    scrollTab (position, directionY) {
      if (position.y >= 0) {
        this.$refs.tabScroll.disable()
        this.$refs.wrapperScroll.enable()
      } else {
        this.$refs.wrapperScroll.disable()
        this.$refs.tabScroll.enable()
      }
    },
    scrollTabThree (position, directionY) {
      if (position.y >= 0) {
        this.$refs.tabThreeScroll.disable()
        this.$refs.wrapperScroll.enable()
      } else {
        this.$refs.wrapperScroll.disable()
        this.$refs.tabThreeScroll.enable()
      }
    },
    scrollTravelTab (position, directionY) {
      if (position.y >= 0) {
        this.$refs.tabTravelScroll.disable()
        this.$refs.wrapperScroll.enable()
      } else {
        this.$refs.wrapperScroll.disable()
        this.$refs.tabTravelScroll.enable()
      }
    },
    changeFollowStatus (targetUserId) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text(this.$t('toast.mustLogin'), 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      if (userId === targetUserId) {
        this.$vux.toast.text('自己不能关注自己！', 'middle')
        return
      }
      const valid = this.followStatus = 1
      this.followStatus = valid
      this.sendRequest = true
      const _self = this
      axios.post(this, `/v1/follow/${userId}/${targetUserId}/${valid}`, null, (data) => {
        _self.sendRequest = false
        if (valid) {
          axios.post(this, '/v1/pushAlias', {
            userId: targetUserId,
            content: `${localUser.get('nickname')}刚刚加你为好友，赶快去看一看吧~`,
            linkUrl: `/user/newfriends`
          })
          this.$vux.toast.text('加好友请求发送成功', 'middle')
        }
      }, null, false)
    },
    sendMessage () {
      if (localUser.get('id') == null) {
        this.$vux.toast.text(this.$t('toast.mustLogin'), 'middle')
        return
      }
      this.$store.dispatch('setChatObject', this.user)
      this.$router.push('/chat')
    },
    toFollow () {
      if (localUser.get('id') == null) {
        this.$vux.toast.text(this.$t('toast.mustLogin'), 'middle')
        return
      }
      this.$router.push('/user/focus/' + this.$route.params.userId)
    },
    toFans () {
      if (localUser.get('id') == null) {
        this.$vux.toast.text(this.$t('toast.mustLogin'), 'middle')
        return
      }
      this.$router.push('/user/fans/' + this.$route.params.userId)
    },
    selectTabEvery (value) {
      console.log(value)
      this.selected = value
    },
    handleGoEvalutionDesc () {
      this.$router.push('/user/evalutionDesc')
    },
    handleGoQuestionAndAnswer () {
      this.$router.push('/user/questionandanswer')
    },
    myFocus () {
      this.$router.push('/user/focus/' + this.$route.params.userId)
    },
    myFans () {
      this.$router.push('/user/fans/' + this.$route.params.userId)
    },
    // 获取某个人发布的所有动态
    getTaDynamic (isFirst) {
      axios.get(this, '/v1/dynamic', {publisher: this.$route.params.userId, pageNum: this.pageNum, pageSize: this.pageSize}, (data) => {
        console.log(data)
        data.forEach(item => {
          item.publishTempTime = this.moment(item.publishTime).from(this.moment())
        })
        if (isFirst) {
          this.taDynamic = data
          return
        }
        if (data.length === 0) {
        //   this.$vux.toast.text('没有更多数据了', 'middle')
          if (this.$refs.tabScroll && this.pageNum > 1) {
            this.pageNum--
            this.$refs.tabScroll.hiddenPullUpLoad()
          } else {
            if (this.$refs.tabScroll) {
              this.$refs.tabScroll.hiddenPullDown()
            }
          }
        } else {
          if (this.pageNum > 1) {
            this.taDynamic = this.taDynamic.concat(data)
          } else {
            this.taDynamic = data
          }
        }
      })
    },
    // 获取攻略和游记接口 0是游记，1是攻略，articleType
    handleGetTravel (isFirst) {
      axios.get(this, '/v1/playStrategy', {publishUserId: this.$route.params.userId, pageNum: this.pageTravelNum, pageSize: this.pageTravelSize}, (data) => {
        data.forEach(item => {
          if (item.articleType === 0) {
            item.articleText = '游记'
          } else if (item.articleType === 1) {
            item.articleText = '攻略'
          }
        })
        if (isFirst) {
          this.travelList = data
          return
        }
        if (data.length === 0) {
          if (this.$refs.tabTravelScroll && this.pageTravelNum > 1) {
            this.pageTravelNum--
            this.$refs.tabTravelScroll.hiddenPullUpLoad()
          } else {
            if (this.$refs.tabTravelScroll) {
              this.$refs.tabTravelScroll.hiddenPullDown()
            }
          }
        } else {
          if (this.pageTravelNum > 1) {
            this.travelList = this.travelList.concat(data)
          } else {
            this.travelList = data
          }
        }
      })
    },
    // handleGetStrategy (isFirst) {
    //   axios.get(this, '/v1/playStrategy', {articleType: 1, publishUserId: this.$route.params.userId, pageNum: this.pageStragetyNum, pageStragetySize: this.pageStragetySize}, (data) => {
    //     if (isFirst) {
    //       this.strategyList = data
    //       return
    //     }
    //     if (data.length === 0) {
    //       if (this.$refs.tabThreeScroll && this.pageStragetyNum > 1) {
    //         this.$refs.tabThreeScroll.hiddenPullUpLoad()
    //       } else {
    //         if (this.$refs.tabThreeScroll) {
    //           this.$refs.tabThreeScroll.hiddenPullDown()
    //         }
    //       }
    //     } else {
    //       if (this.pageStragetyNum > 1) {
    //         this.strategyList = this.strategyList.concat(data)
    //       } else {
    //         this.strategyList = data
    //       }
    //     }
    //   })
    // },
    // 获取动态数量
    hangdleGetDynamicNum (userId) {
      axios.get(this, '/v1/dynamicCount', {publisher: userId}, (data) => {
        this.listTab[0].num = ' ' + data
      })
    },
    // 获取游记和攻略数量，0是游记，1是攻略，articleType
    hangleGetTravelNum (userId) {
      if (this.user.local === 1 || this.user.local === '1') {
        axios.get(this, '/v1/playStrategyCount', {publishUserId: userId}, (data) => {
          this.listTab[1].num = ' ' + data
        })
      } else {
        axios.get(this, '/v1/playStrategyCount', {publishUserId: userId, articleType: 0}, (data) => {
          this.listTab[1].num = ' ' + data
        })
      }
    },
    // hangleGetStrategyNum (userId, articleType) {
    //   axios.get(this, '/v1/playStrategyCount', {publishUserId: userId, articleType: articleType}, (data) => {
    //     this.listTab[2].num = ' ' + data
    //   })
    // },
    // 动态部分的下拉刷新，上拉加载
    onPullingUp () {
      this.pageNum++
      this.getTaDynamic()
    },
    onTravelPullingUp () {
      this.pageTravelNum++
      this.handleGetTravel()
    },
    // onStrategyPullingUp () {
    //   this.pageStragetyNum++
    //   this.handleGetStrategy()
    // },
    // 预览图片
    clickImg (imgs, index) {
      this.$vux.loading.show({
        text: this.$t('toast.loading'),
        position: 'absolute'
      })
      let temp = []
      imgs.forEach((img, i) => {
        temp.push({
          src: img
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    },
    handleDynamic (dynamicId) {
      this.$router.push('/meiTu/dynamicDesc/' + dynamicId)
    },
    handlePublishDynamic () {
      this.$router.push('/meiTu/publishDynamic')
    },
    showSelectTypeText() {
      this.$router.push(`/user/travelmiddle`)
    },
    handlePublishTravel () {
      this.$router.push('/user/travelmiddle')
    },
    handleGoTravelDesc (id) {
      this.$router.push('/address/travels/' + id)
    },
    getOtherBaseInfo () {
      axios.get(this, '/v1/userInfo/' + this.$route.params.userId, null, (data) => {
        this.user = data
      })
    },
    getFollowStatus () {
      axios.get(this, '/v1/follows', {
        follower: localUser.get('id'),
        following: this.$route.params.userId
      }, (data) => {
        if (data.length === 1) {
          this.followStatus = 1
        } else {
          this.followStatus = 0
        }
      })
    },
    handlePhotoWall () {
      this.$router.push('/user/photowall/' + this.$route.params.userId)
    },
    getPhotoWallNum () {
      axios.get(this, '/v1/photosCount', {userId: this.$route.params.userId}, (data) => {
        this.photoWallNum = data
      })
    },
    // 判断是否是好友
    handleIsFriends () {
      axios.get(this, '/v1/isFriend/' + localUser.get('id') + '/' + this.$route.params.userId, null, (data) => {
        this.isFriends = data
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  [v-cloak] {
    display: none;
  }

  .archives{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: $color-background;
    z-index: 101;
  }


.top {
    height: 250px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    .wrapper {
      height: 250px
      background: rgba(57, 57, 57, 0.3)
      padding-left: 15px;
      padding-bottom: 16px;
      color: #fff;
      .head {
        width: 90px
        height 90px
        background-size: cover
        background-repeat: no-repeat
        border-radius: 50%
      }

      .num {
        display: flex;
        padding-left: 18px;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 50px;
        .item {
          width: 65px;
          text-align: center;
          font-size: 12px;

          p {
            line-height: 25px;
          }
        }

        .diliver {
          width: 1px;
          height: 21px;
          margin: auto 0;
          background: #fff;
        }
      }

      .photoWallWrapper {
        margin-top 10px
        padding-left: 5px;
        padding-right: 5px;
        height 25px
        background: rgba(0,0,0,0.5)
        text-align center
      }

      .btn {
        position absolute
        top 168px
        right 15px
        .litter-button {
          padding: 0 11px;
          width: fit-content;
          height: 22px;
          line-height: 22px;
          border: 1px solid #fff;
          border-radius: 3px;
          color: #fff;
          font-size: 12px;
          float: right;
          margin-left: 8px;
        }
      }
      .signatureWrapper {
        font-size 10px
        margin-top 4px
      }
      .nickWrapper {
        display: flex;
        justify-content: space-between;
        .nickNameWrapper {
          font-weight: bold;
          color: #fefefe;
          font-size: 15px;
        }
      }
    }
  }

  .travelWrapper {
    .momentsDesc {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        margin-bottom 10px
    }
    .imageContent {
       display flex
       .imageWrapper {
          margin-right 1px
          width: 90px
          height 90px
          background-size: cover
          background-repeat: no-repeat
          background-position 50% 50%
       }
    }
    .allPhoto {
      display flex
      justify-content space-between
      .photoNum {
        margin-top 5px
      }
    }
    background-color: white;
    p {
        color: #888;
        font-size: 0.8rem;
    }
    h4 {
        color: #666;
        font-weight: normal;
        font-size: $font-size-title;
    }
}

.positionWrapper {
  padding-top: 4px;
  padding-left: 2px;
  .yearWrapper {
    font-size: $font-size-large
    font-weight: bold
  }
  .monthWrapper {
    font-size: $font-size-desc
    font-weight: bold
  }
}


.answerWrapper {
  background-color: white;
  padding-top 15px;
  padding-left 15px
  padding-right 15px
  padding-bottom 10px
  border-bottom-style solid
  border-width:1px
  border-color: #E4E4E4
  .answerTitle {
    display flex
  }
  .answerDesc {
    margin-top 20px
    padding-left 28px
    font-size $font-size-title
    color $color-text-2
    font-family '宋体'
  }
  .answerTime {
    margin-top 20px
    display flex
    .positionWrapper {
      padding-left 28px
      width 50%
      font-size $font-size-small
    }
    .timeWrapper {
       width 50%
       text-align right
       font-size $font-size-small
    }
  }
}

 .hrLine {
    height: 1px;
    border: none;
    border-top: 1px solid #E5E5E5;
  }

  .evalution {
    margin-bottom 10px
    box-shadow: 0px 0px 15px #C5C5C5;
    background-color white
    padding-top 15px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    display flex
    .evalutionImg {
      width 15%
    }
    .evalutionText {
      width 85%
      .raterWrapper p {
        color: $color-text-2
        font-size: $font-size-desc
        margin-left 5px
      }
      .evalutionTitle {
        margin-top 10px
        font-family: '宋体'
        color: $color-text-2
      }
      .productWrapper {
        margin-top 10px
        display flex
        background-color: $color-background
        .productImg {
          width 10%
          .productImgNext {
            margin-top 7px
            margin-left 10px
          }
        }
        .productCell {
          width 90%
        }
      }
    }
  }

  .travelTabWrapper {
    margin-bottom 10px
    box-shadow: 0px 0px 15px #C5C5C5;
    background-color white
    .travelTabTop {
        padding-top 15px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
        display: flex
        justify-content space-between
        .travelTabTopLeft {
            p {
                font-size $font-size-title
                font-weight bold
            }
        }
        .travelTabTopRight {
            display flex
            img {
                margin-top -4px
            }
        }
    }
    .travelInfo {
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        display flex
        justify-content space-between
        border-bottom-style solid
        border-width:1px
        border-color: #E4E4E4
        .travelInfoLeft {
            display flex
            .travelInfoLeftOne {

            }
            .travelInfoLeftTwo {
                p {
                    font-size $font-size-small
                    margin-left 10px
                    margin-top 10px
                }
            }
        }
        .travelInfoRight {
            display flex
            .travelInfoRightOne {
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
            .travelInfoRightTwo {
                margin-left: 10px
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
        }
    }
    .travelImageWrapper {
        position relative
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
      .travelImage {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
      .imageText {
        border 1px solid #fff
        border-radius 3px
        position absolute
        height: 20px;
        line-height: 20px;
        top: 178px;
        left: 25px;
        padding-left: 5px;
        padding-right: 5px;
        p {
          color #fff
        }
      }
    }
  }

  .strategyWrapper {
      margin-bottom: 10px
      background-color: white
      padding-top 15px
      padding-left 15px
      padding-right 15px
      padding-bottom 10px
      box-shadow: 0px 0px 15px #C5C5C5
      .textWrapper {
          margin-top 5px
          font-weight bold
      }
      .imgWrapper {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
      .positionWrapper {
          p {
            font-size: $font-size-small
          }
      }
      .bottomStrategy {
          margin-top 5px
          display flex
          justify-content: space-between
          .countWrapper {
              p {
                font-size: $font-size-small
              }
          }
          .timeWrapper {
              p {
                font-size: $font-size-small
              }
          }
      }
  }

  .travelPublish {
    z-index: 999;
    width: 50px;
    height: 50px;
    bottom: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
     img {
      width: 50px
      height 51px
      background-size: cover
      background-repeat: no-repeat
    }
  }

  .dynamicPublish {
    z-index: 999;
    width: 50px;
    height: 50px;
    bottom: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 50px
      height 51px
      background-size: cover
      background-repeat: no-repeat
    }
  }

  .categaryPublish {
    z-index: 999;
    width: 50px;
    height: 50px;
    bottom: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
     img {
      width: 50px
      height 51px
      background-size: cover
      background-repeat: no-repeat
    }
  }

  .recentTime {
    margin-top: 5px
  }

  .nickname {
    display flex
  }


.popup-wrapper {
  background: #fff;
  .select-type {
    .row {
      display: flex;
      justify-content: space-around;
      .item {
        width: 100px;
        text-align: center;
        margin-bottom: 12px;
        img {
          width: 50px;
          height: 50px;
        }
        p {
          margin-top: -5px;
        }
      }
    }
  }

  .search-list {
    padding: 15px;
    list-style: none;
    line-height: 1.6;

    li {
      border-bottom: 1px solid $color-border;
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .name {
      font-weight: bold;
      width: calc(100% - 55px)
    }
    .travels-type {
      width: 40px;
      font-size: $font-size-small;
      padding: 3px 0;
      text-align: center;
      border-radius: 2px;
      line-height: 1;
      border: 1px solid $color-theme-1;
      color: $color-theme-1;
    }
    .primary {
      border: 1px solid $color-theme;
      color: $color-theme;
    }
  }
}
</style>
